<template>
	<view class="wrap">
		<view class="quesList"
			v-for="(item,index) in recordList"
			:key="index"
		>
			<view class="quesTit">
				<block v-if="item.htmlFlag">
					<jyf-parser :html="item.labelTitle" :tag-style="tagStyle" :selectable="true"></jyf-parser>
				</block>
				<block v-else>
					{{item.labelTitle}}
				</block>
			</view>
			<view class="quesOptions">
				<view class="optionsItem"
					:class="[innerItem.selected == 1 ? 'active' : '']"
					v-for="(innerItem,innerIndex) in item.labelList"
					:key="innerIndex"
				>
					<view class="optionsCon">{{innerItem.label}}</view>
				</view>
				<view class="useSeconds">用时:{{item.useSecond}}s</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				logId:'',
				tagStyle: {
					p: 'font-size:18px'+
						'px;font-weight:400;margin-bottom:25px;text-align:justify;word-break:normal;word-wrap:break-word;/* background-color:transparent!important; */color:#333333',
					section: 'font-size:18px'+
						'px;font-weight:400;',
					img: 'max-width:100%!important;height:auto!important;margin:8px auto!important;display:block!important'
				},
				recordList:[]
			}
		},
		onLoad(options){
			var reportObj = uni.getStorageSync('recordList');
			this.recordList = uni.getStorageSync('recordList').queList;
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title:reportObj.title + '测评记录'
				})
			},100)
		},
		methods:{
			
		}
	}
</script>

<style lang='scss'>
	.wrap{
		padding: 0 30rpx;
		margin-top: 30rpx;
	}
	.innerQues{
		min-height: 300rpx;
	}
	.useSeconds{
		color: $pss-text-color8;
		margin-right: 10rpx;
		font-weight: normal;
		text-align: right;
		font-size: 26rpx;
	}
	.botAnsBtn{
		width: 100%;
		position: fixed;
		left: 0;
		bottom:0rpx;
		height: 130rpx; 
		background: #fff;
		display: flex;
		align-items: center;
		.comBtn{
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: $pss-color-green;
			border-radius: 50rpx;
			margin-left: 260rpx;
			margin-right: 30rpx;
		}
	}
	.quesList{
		padding: 30rpx 20rpx 50rpx;
		background: #fff;
		border-radius: 20rpx;
		min-height: 300rpx;
		margin-bottom: 30rpx;
		.quesType{
			height: 60rpx;
			line-height: 60rpx;
			font-size: $font-size32;
			color: $pss-color-green;
			margin-bottom: 10rpx;
		}
		.quesTit{
			font-size: $font-size30;
			color: $pss-text-color3;
			padding-bottom: 10rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.quesOptions{
			/* padding:0rpx 0 1rpx; */
			position: relative;
			.quesMask{
				/* background: transparent; */
				background: rgba(0,0,0,.1);
				z-index: 10;
			}
			.optionsItem{
				border: 1rpx solid #eee; 
				border-radius: 15rpx;
				margin-bottom: 40rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				.optionsCon{
					width: 99%; 
					padding: 26rpx 20rpx 26rpx 15rpx;
					font-size: $font-size28; 
					color: $pss-text-color8;
					display: flex;
					align-items: center;
				}
				&:last-child{
					margin-bottom: 0;
				}
				&.active{
					.optionsCon{
						color: $pss-color-blueDeep;
					}
				}
			}
		}
	}
	page{
		background: $pss-bg-primary;
	}
</style>